<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .projectAdd {
            display: none;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>project</h1>
    </div>
    <button onclick="displayAddProject()">添加项目</button>
    <button><a href="/">返回</a></button>
    <div class="projectAdd">
        <form action="/project/add" method="post">
            项目名: <input type="text" name="projectName">
            项目描述: <input type="text" name="projectDescribe">
            <button type="submit">确认</button>
        </form>
    </div>
    <div class="content">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>项目</th>
                    <th>项目描述</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {{ range .data }}
                <tr>
                    <td>{{ .ProjectId }}</td>
                    <td>
                        <a href="/project/members/{{ .ProjectName }}">{{ .ProjectName }}</a>
                    </td>
                    <td>{{ .ProjectDescribe }}</td>
                    <td>{{ .CreateTime }}</td>
                    <td>
                        <button><a href="/project/delete/{{ .ProjectId }}">delete</a></button>
                    </td>
                </tr>
                {{ end }}
            </tbody>
        </table>
    </div>
    <script>
        function displayAddProject() {
            var projectAdd = document.querySelector(".projectAdd");
            projectAdd.style.display = projectAdd.style.display === "none" ? "block" : "none";
        }
    </script>
</body>
</html>